@import "../../../../styles/colors.scss";
@import "../../../../styles/animations.scss";

.surveyItemEmpty {
  height: 250px;
  background-color: $white;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-radius: 8px;
  flex-basis: 48%;
  margin-bottom: 24px;
  box-shadow: 0px 1px 3px -1px $black;
  position: relative;
  overflow: hidden;
  background-repeat: no-repeat;
  background-image:
    linear-gradient(to right, $disabledBackground, $disabledBackground),
    linear-gradient(to right, $disabledBackground, $disabledBackground),
    linear-gradient(to right, $disabledBackground, $disabledBackground),
    linear-gradient(to right, $disabledBackground, $disabledBackground),
    linear-gradient(to right, $disabledBackground, $disabledBackground);
  background-position:
    24px 55px,
    left 0 bottom 0,
    108px 77px,
    108px 97px,
    108px 117px;
  background-size:
    60px 100px,
    100% 40px,
    140px 16px,
    120px 16px,
    160px 16px;
  
  &::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    transform: translateX(-100%);
    background-image: linear-gradient(to right, transparent, rgba($white, 0.2), transparent);
    animation: shimmer 1.2s infinite;
  }
}

@media only screen and (max-width: 600px) {
  .surveyItemEmpty {
    flex-basis: 100%;
  }
}